import React, { useEffect, useState } from 'react'
import Myhead from '../../components/myhead'
import { Form, Input ,Button} from 'antd-mobile'
import { reg } from '../../utils/validate'
import './lgName.scss'
import { useNavigate ,Link, useLocation} from 'react-router-dom'
import { ajax } from '../../api'
import { message } from 'antd'
const styles:any={
  extraPart:{
      borderLeft: 'solid 1px #eeeeee',
      paddingLeft:' 12px',
      fontSize: '17px',
      lineHeight: '22px'
  }
}
export default function Forgetpass() {
  const [form] = Form.useForm()
  const navigate =  useNavigate()
  let [flag,setFlag]=useState<boolean>(true)
    let [count,setCount]=useState<number>(120)
    //定时器
    let timer:any=null
    const timeDown=()=>{
        timer=setInterval(()=>{
          if(count>0){
            setCount(--count)
          }
          else{
            clearInterval(timer)
            timer=null
            setFlag(true)
            setCount(120)
          }
        },1000)
      }
    const changeFlag=()=>{
        console.log(form);
        //发送验证码判断是否有电话号码
        ajax.findOne({
          phone:form.getFieldValue('phone')
        }).then(result=>{
          if(result.result){
            console.log(result);
          }
          
        })
        
        setFlag(false)
        timeDown()
    }
    
    const onFinish=async (values:any)=>{
      console.log(values);
        if(values.password==values.dbpassword){
        ajax.checkWord(values).then(result=>{
            console.log(result);
            if(result.code==200){
                //验证码验证成功
                ajax.forgetPass(values).then(result1=>{
                    
                    navigate('/login')
                })
             
            }else{

            }
        })
       
        }else{
            message.error("两次输入密码不同")
        }
        
   }
    const onFinishFailed=()=>{
      message.error('请输入正确的表单信息');
    }
    const location=useLocation()
      useEffect(()=>{
        console.log(form);
        let phone=new URLSearchParams(location.search).get('phone')
        console.log(phone);
        if(phone){
          form.setFieldsValue({
            phone
          })
        }
        return ()=>{
          clearInterval(timer)
          timer = null 
          setCount(120)
          setFlag(true)
        }
      },[])
      

  return (
    <div>
        <Myhead title='找回密码' back="true"></Myhead>
        <Form layout='horizontal' style={{marginTop:'0.44rem'}}
        onFinish={onFinish}
        onFinishFailed={onFinishFailed}
        form={form}
        footer={
          <Button block type='submit' color='primary' size='middle'>
            提交
          </Button>
        }>
          <Form.Item label='手机号码' name='phone'
           rules={[
            { required: true, message: '手机号不能为空' },
            { pattern: reg.phone, message: '手机号格式不对' }
          ]}
          >
            <Input placeholder='请输入手机号码' clearable
            
            />
          </Form.Item>
          <Form.Item 
          label='密码' 
          name='password'
          rules={[
            { required: true, message: '密码不能为空' },
            { pattern: reg.pwd, message: '密码为6到16位的字母和数字组合' }
          ]}
          >
            <Input placeholder='请输入密码' clearable type='password' />
          </Form.Item>
          <Form.Item 
          label='确认密码' 
          name='dbpassword'
          rules={[
            { required: true, message: '密码不能为空' },
            { pattern: reg.pwd, message: '密码为6到16位的字母和数字组合' },
            ({ getFieldValue }) => ({
              validator(_, value) {
              if (!value || getFieldValue('password') === value) {
                  return Promise.resolve();
              }
              return Promise.reject(new Error('两次密码不一致!'));
              },
          }),
          ]}
          >
            <Input placeholder='请确认密码' clearable type='password' />
          </Form.Item>
          <Form.Item
            label='短信验证码'
            extra={
              flag? <div className={styles.extraPart} onClick={changeFlag}>
                <a>发送验证码</a>
              </div>:<div className={styles.extraPart}>
                剩余{count}S
              </div>
            }
            rules={[{ required: true, message: '验证码不能为空' }, {
              pattern:reg.code,message:'请输入长度为4位的验证码'
            }]}
            name="captcha"
          >
            <Input placeholder='请输入验证码' clearable />
          </Form.Item>
          <Form.Item
           style={{background:'#f4f4f4',fontSize:12}}
          >
            <Link to="/register">没有账号，前往注册</Link >
            <Link to="/login">前往登录</Link >
          </Form.Item>
        </Form>
    </div>
  )
}
